<template>
  <div class="fiveFund">
    <section class="monthSwitch clearfix">
      <span class="tt">当前需计算月份</span>
      <span
        class="mv"
        :class="[isMonth==current?'monthActive':'']"
        @click="monthSelect(current)"
      >{{current}}月</span>
      <span
        class="mv"
        :class="[isMonth==next?'monthActive':'']"
        @click="monthSelect(next)"
      >{{next}}月</span>
      <span class="tip">当前有多个城市或项目的受理月份不同，请对应切换查看</span>
    </section>
    <section class="header clearfix">
      <span>{{isMonth}}月五险一金缴费明细</span>
      <!-- <span class="org" @click="jumpPage('history')">
        <i class="iconfont iconlishijilu"></i>历史明细表
      </span> -->
    </section>
    <ul class="menu-swtich">
      <li
        v-for="(item, index) in menu"
        :key="index"
        :class="[switchIndex==index?'active':'']"
        @click="switchFun(index)"
      >{{item.city}}</li>
    </ul>
    <div class="showMoney">
      <div class="sm-h clearfix">
        <section>
          <span>社保</span>
          <span class="month">{{isMonth}}月</span>
        </section>
        <section>
          <span>公积金</span>
          <span class="month">{{isMonth}}月</span>
        </section>
        <section class="download">
          <i class="iconfont iconbiaoge-xiazai"></i>
          <span>导出社保公积金明细</span>
        </section>
      </div>
      <div class="sm-f clearfix">
        <ul>
          <li class="value">{{sbNum}}</li>
          <li>社保缴纳人数</li>
        </ul>
        <ul>
          <li class="value">{{sbTotalMoney}}</li>
          <li>社保金额/元</li>
        </ul>
        <ul>
          <li class="value">{{gjjNum}}</li>
          <li>公积金缴纳人数</li>
        </ul>
        <ul>
          <li class="value">{{gjjTotalMoney}}</li>
          <li>公积金金额/元</li>
        </ul>
        <div class="button" v-show="isGenerateBill==1" @click="jumpPage('billManagement')">生成账单</div>
      </div>
    </div>
    <div class="search-box" @keyup.enter="searchFun">
      <i class="iconfont iconsearch1"></i>
      <el-input placeholder="输入员工姓名进行搜索" class="search" v-model.trim="name" ></el-input>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        ref="table"
        v-loading="loading"
      >
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <div class="content">
              <section>
                <span>医疗个人</span>
                <span>{{medicalPersonalProportion | percentFilter}}%</span>
                <span>{{medicalPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>养老个人</span>
                <span>{{pensionPersonalProportion | percentFilter}}%</span>
                <span>{{pensionPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>失业个人</span>
                <span>{{unemploymentPersonalProportion | percentFilter}}%</span>
                <span>{{unemploymentPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>工伤个人</span>
                <span>{{workInjuryPersonalProportion | percentFilter}}%</span>
                <span>{{workInjuryPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>生育个人</span>
                <span>{{birthPersonalProportion | percentFilter}}%</span>
                <span>{{birthPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span title="大病医疗">大病医疗</span>
                <span>-</span>
                <span>{{dbMoney | moneyFilter}}</span>
              </section>
            </div>
            <div class="content">
              <section>
                <span>医疗公司</span>
                <span>{{medicalCompanyProportion | percentFilter}}%</span>
                <span>{{medicalCompanyMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>养老公司</span>
                <span>{{pensionCompanyProportion | percentFilter}}%</span>
                <span>{{pensionCompanyMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>失业公司</span>
                <span>{{unemploymentCompanyProportion | percentFilter}}%</span>
                <span>{{unemploymentCompanyMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>工伤公司</span>
                <span>{{workInjuryCompanyProportion | percentFilter}}%</span>
                <span>{{workInjuryCompanyMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>生育公司</span>
                <span>{{birthCompanyProportion | percentFilter}}%</span>
                <span>{{birthCompanyMoney | moneyFilter}}</span>
              </section>
            </div>
            <div class="content">
              <section>
                <span>工会费</span>
                <span>-</span>
                <span>{{ghfMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>残联金</span>
                <span>-</span>
                <span>{{czjMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>社保个人</span>
                <span>{{sbPersonalProportion | percentFilter}}%</span>
                <span>{{personalSbFinalSum | moneyFilter}}</span>
              </section>
              <section>
                <span>社保公司</span>
                <span>{{sbCompanyProportion | percentFilter}}%</span>
                <span>{{companySbFinalSum | moneyFilter}}</span>
              </section>
                  <section>
                <span>公积金个人</span>
                <span>{{gjjPersonalProportion | percentFilter}}%</span>
                <span>{{gjjPersonalMoney | moneyFilter}}</span>
              </section>
              <section>
                <span>公积金公司</span>
                <span>{{gjjCompanyProportion | percentFilter}}%</span>
                <span>{{gjjCompanyMoney | moneyFilter}}</span>
              </section>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="sbBaseValue" label="社保基数" :formatter="baseFilter"></el-table-column>
        <el-table-column prop="personalSbFinalSum" label="社保个人" :formatter="baseFilter"></el-table-column>
        <el-table-column prop="companySbFinalSum" label="社保公司" :formatter="baseFilter"></el-table-column>
        <el-table-column prop="gjjBaseValue" label="公积金基数" :formatter="baseFilter"></el-table-column>
        <el-table-column prop="personalGjjFinalSum" label="公积金个人" :formatter="baseFilter"></el-table-column>
        <el-table-column prop="companyGjjFinalSum" label="公积金公司" :formatter="baseFilter"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button  size="mini" @click="toogleExpand(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6,12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import base from "@/assets/js/base";
    import { requestApiPost } from '../api/api';
    import { reqRep } from '../report/reqReport';
    import { resRep } from "../report/resReport";
export default {
  name: "fiveFund",
  data() {
    return {
      loading: false,
      current: 1,
      total: null,
      pageSize:6,
      isMonth: new Date().getMonth() + 1 > 12 ? 1 : new Date().getMonth() + 1,
      current: new Date().getMonth() + 1 > 12 ? 1 : new Date().getMonth() + 1,
      next: new Date().getMonth() + 2 > 12 ? 1 : new Date().getMonth() + 2,
      isGenerateBill: 2,
      isNumber: 0,
      switchIndex: 0,
      name: "",
      gjjNum: "0",
      gjjTotalMoney: "0",
      sbNum: "0",
      sbTotalMoney: "0",
      menu: [],
      tableData: [],
      pensionPersonalProportion: "",
      pensionPersonalMoney: "",
      medicalPersonalProportion: "",
      medicalPersonalMoney: "",
      unemploymentPersonalProportion: "",
      unemploymentPersonalMoney: "",
      workInjuryPersonalProportion: "",
      workInjuryPersonalMoney: "",
      birthPersonalProportion: "",
      birthPersonalMoney: "",
      dbMoney: "",
      ghfMoney: "",
      czjMoney: "",
      pensionCompanyProportion: "",
      pensionCompanyMoney: "",
      medicalCompanyProportion: "",
      medicalCompanyMoney: "",
      sbPersonalProportion:"",
      sbCompanyProportion:"",
      unemploymentCompanyProportion: "",
      unemploymentCompanyMoney: "",
      workInjuryCompanyProportion: "",
      workInjuryCompanyMoney: "",
      birthCompanyProportion: "",
      birthCompanyMoney: "",
      gjjPersonalProportion: "",
      gjjCompanyProportion: "",
      gjjPersonalMoney: "",
      gjjCompanyMoney: "",
      personalSbFinalSum:"",
      companySbFinalSum:""
    };
  },
  methods: {
    handleCurrentChange(e) {
      this.current = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getList();
    },
    toogleExpand(row) {
      this.getInfo(row.id);
      let $table = this.$refs.table;
      this.tableData.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false);
        }
      });
      $table.toggleRowExpansion(row);
    },
    getInfo(userId) {
      base
        .getAjax("/user/sbGjjPersonalDetails", {
          userId: userId
        })
        .then(res => {
          if (res.data.code == 1) {
            let obj = res.data.data;
            this.pensionPersonalProportion = obj.pensionPersonalProportion;
            this.pensionPersonalMoney = obj.pensionPersonalMoney;
            this.medicalPersonalProportion = obj.medicalPersonalProportion;
            this.medicalPersonalMoney = obj.medicalPersonalMoney;
            this.unemploymentPersonalProportion =
              obj.unemploymentPersonalProportion;
            this.unemploymentPersonalMoney = obj.unemploymentPersonalMoney;
            this.workInjuryPersonalProportion =
              obj.workInjuryPersonalProportion;
            this.workInjuryPersonalMoney = obj.workInjuryPersonalMoney;
            this.birthPersonalProportion = obj.birthPersonalProportion;
            this.birthPersonalMoney = obj.birthPersonalMoney;
            this.dbMoney = obj.dbMoney;
            this.ghfMoney = obj.ghfMoney;
            this.czjMoney = obj.czjMoney;
            this.pensionCompanyProportion = obj.pensionCompanyProportion;
            this.pensionCompanyMoney = obj.pensionCompanyMoney;
            this.medicalCompanyProportion = obj.medicalCompanyProportion;
            this.medicalCompanyMoney = obj.medicalCompanyMoney;
            this.unemploymentCompanyProportion =
              obj.unemploymentCompanyProportion;
            this.unemploymentCompanyMoney = obj.unemploymentCompanyMoney;
            this.workInjuryCompanyProportion = obj.workInjuryCompanyProportion;
            this.workInjuryCompanyMoney = obj.workInjuryCompanyMoney;
            this.birthCompanyProportion = obj.birthCompanyProportion;
            this.birthCompanyMoney = obj.birthCompanyMoney;
            this.gjjPersonalProportion = obj.gjjPersonalProportion;
            this.gjjCompanyProportion = obj.gjjCompanyProportion;
            this.gjjPersonalMoney = obj.gjjPersonalMoney;
            this.gjjCompanyMoney = obj.gjjCompanyMoney;
            this.sbPersonalProportion=obj.sbPersonalProportion;
            this.sbCompanyProportion=obj.sbCompanyProportion;
            this.personalSbFinalSum=obj.personalSbFinalSum;
            this.companySbFinalSum=obj.companySbFinalSum;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1500
            });
          }
        });
    },
    getData() {
      base
        .getAjax("/user/companyAreaList", {
          companyId: JSON.parse(sessionStorage.getItem('login')).companyId,
          month: this.isMonth,
        })
        .then(res => {
          if (res.data.code == 1) {
            this.menu = res.data.data;
            if (res.data.data.length > 0) {
              this.gjjNum = this.menu[0].gjjNum;
              this.gjjTotalMoney = base
                .accDiv(this.menu[0].gjjTotalMoney, 100)
                .toFixed(2);
              this.sbNum = this.menu[0].sbNum;
              this.sbTotalMoney = base
                .accDiv(this.menu[0].sbTotalMoney, 100)
                .toFixed(2);
              this.isGenerateBill = this.menu[0].isGenerateBill;
              //获取列表
              this.areaCode = res.data.data[0].areaCode;
              this.getList();
            }
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1500
            });
          }
        });
    },
    searchFun() {
      this.current = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.tableData = [];
      base
        .postAjax("/user/sbGjjemployeeList", {
          companyId: JSON.parse(sessionStorage.getItem('login')).companyId,
          areaCode: this.areaCode,
          name: this.name,
          month: this.isMonth,
          pageNum: this.current,
          pageSize: this.pageSize
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 1) {
            this.tableData = res.data.data;
            this.total = parseInt(resReport.data.total);
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1500
            });
          }
        });
    },
    monthSelect(date) {
      this.isMonth = date;
      this.current = 1;
      this.switchIndex = 0;
      this.getData();
    },
    jumpPage(name) {
      base
        .postAjax("/bill/generateBill", {
          areaCodes: this.areaCode,
          month: this.isMonth,
          companyId: JSON.parse(sessionStorage.getItem('login')).companyId,
          bizUserId: JSON.parse(sessionStorage.getItem('login')).id
        })
        .then(res => {
          if (res.data.code == 1) {
            this.$store.commit("changeIndex", 5);
            this.$router.push(name);
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
              duration: 1500
            });
          }
        });
    },
    isClick(num) {
      this.isNumber = num;
    },
    switchFun(i) {
      this.switchIndex = i;
      this.gjjNum = this.menu[i].gjjNum;
      this.gjjTotalMoney = base
        .accDiv(this.menu[i].gjjTotalMoney, 100)
        .toFixed(2);
      this.sbNum = this.menu[i].sbNum;
      this.sbTotalMoney = base
        .accDiv(this.menu[i].sbTotalMoney, 100)
        .toFixed(2);
      this.isGenerateBill = this.menu[i].isGenerateBill;
      //获取列表
      this.areaCode = this.menu[i].areaCode;
      this.getList();
    },
    baseFilter(a, b, c) {
      if (c > 0) {
        return base.accDiv(c, 100);
      } else {
        return c;
      }
    }
  },
  filters: {
    moneyFilter(val) {
      if (val > 0) {
        return base.accDiv(val, 100);
      } else if (val == 0) {
        return 0;
      } else {
        return "-";
      }
    },
    percentFilter(val){
      if (val >= 0) {
        return val;
      } else {
        return "-";
      }
    }

  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
.monthSwitch {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.monthSwitch .tt {
  color: #666;
}
.monthSwitch span {
  margin-right: 20px;
}
.monthSwitch .mv {
  cursor: pointer;
}
.monthSwitch .mv:hover {
  color: #33ac37;
}
.monthActive {
  color: #33ac37;
}

.monthSwitch .tip {
  float: right;
  margin-right: 0;
  color: #999;
}
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header .org {
  float: right;
  cursor: pointer;
}
.org:hover {
  color: #13cb6e;
}
.header i {
  margin-right: 5px;
}
.opt-user {
  padding: 20px 15px;
}
.opt-user > section {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.opt-user i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
.opt-user .iconadd1 {
  color: #13cb6e;
}
.opt-user .iconbiaoge-xiazai {
  color: #33ac37;
}
.add-user:hover {
  color: #13cb6e;
}
.input-user:hover {
  color: #33ac37;
}
.menu-swtich {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.menu-swtich li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
}
.active {
  color: #13cb6e;
  border-bottom: 2px solid #13cb6e;
}
.search-box {
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.search-box i {
  font-size: 18px;
  margin-left: 15px;
  color: #999;
  vertical-align: middle;
}
.search-box .search {
  display: inline-block;
  width: calc(100% - 36px);
}
.showMoney {
  padding: 15px;
}
.showMoney .sm-h {
  margin-bottom: 40px;
}
.sm-h section {
  display: inline-block;
  margin-right: 20px;
}
.sm-h .month {
  margin-left: 10px;
  color: #999;
}
.download {
  float: right;
  font-size: 14px;
  margin-right: 0 !important;
}
.sm-f > ul {
  display: inline-block;
  width: 130px;
  margin-right: 15px;
  color: #666;
}
.sm-f .value {
  color: #666;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.sm-f .button {
  float: right;
  width: 140px;
  text-align: center;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #13cb6e;
}

.table .content {
  float: left;
  width: 33%;
  height: 270px;
  border-right: 1px solid #ccc;
  background-color: #eee;
}
.table .content:last-child {
  border: none;
}
.table .content > section {
  padding: 10px 15px;
}
.table .content > section span {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.table .content > section span:nth-child(2) {
  text-align: center;
}
.table .content > section span:last-child {
  margin-right: 0;
  text-align: center;
}
</style>
